/** * @description: 公共饼图组件2 */
<template>
  <div class="floor">
    <p class="title">{{ titleText }}</p>
    <div :id="pieShowId" class="pie"></div>
    <div :class="[titleText === '行为失范预警' ? 'warning' : '', 'legend']">
      <p>
        <span>{{ optionData[0].value }}</span>
        <label>{{ optionData[0].name }}</label>
      </p>
      <p>
        <span>{{ optionData[1].value }}</span>
        <label>{{ optionData[1].name }}</label>
      </p>
      <p v-if="optionData.length > 1 && optionData[2]">
        <span>{{ optionData[2].value }}</span>
        <label>{{ optionData[2].name }}</label>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PieEchart',
  props: ['optionData', 'pieShowId', 'titleText', 'pieTitleText', 'lengendPlace', 'colorList'], //传递的参数数组，id区分，名字，lengend位置，颜色区分
  data() {
    return {
      myChart: {},
    }
  },
  watch: {
    optionData: {
      handler(val) {
        this.initdata()
      },
      deep: true,
    },
  },
  mounted() {
    this.initdata()
    window.addEventListener('resize', () => {
      this.myChart.resize() //动态计算大小
    })
  },
  methods: {
    initdata() {
      //计算总数
      let textNum = this.optionData.reduce((sumData, key) => {
        return sumData + key.value
      }, 0)

      this.myChart = this.$echarts.init(document.getElementById(this.pieShowId))
      this.myChart.setOption({
        color: this.colorList,
        title: {
          text: textNum,
          x: '48%',
          y: '40%',
          textStyle: {
            color: '#141418',
            fontSize: 26,
            fontWeight: 500,
          },
          subtext: this.pieTitleText,
          subtextStyle: {
            color: '#141418',
            fontSize: 14,
            align: 'center',
          },
          itemGap: 10,
          textAlign: 'center',
        },

        series: [
          {
            type: 'pie',
            radius: ['55%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.optionData,
          },
        ],
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  padding-bottom: 0;
  min-height: 250px;
  .title {
    font-size: $fz16;
    color: $color-title;
    font-weight: normal;
  }
  .echart-box {
    width: 100%;
    height: 250px;
  }
}
.pie {
  width: 100%;
  height: 230px;
}
.legend {
  @include fca();
  padding-bottom: 19.5px;
  label,
  span {
    display: block;
    text-align: center;
  }
  label {
    font-size: $fz14;
    color: #97979f;
    margin-top: 7.5px;
  }
  label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: url('../../assets/images/circle-icon1.png') no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 1.5px 3px 0px rgba(46, 108, 246, 0.6);

    margin-right: 5px;
  }
  span {
    font-size: $fz24;
  }
  p:last-child {
    label::before {
      background: url('../../assets/images/circle-icon2.png') no-repeat;
      background-size: 100% 100%;
      box-shadow: 0px 1.5px 3px 0px rgba(88, 241, 186, 0.6);
    }
  }
}
.warning.legend {
  p:first-child {
    label::before {
      background: url('../../assets/images/circle-icon3.png') no-repeat;
      background-size: 100% 100%;
      box-shadow: 0px 1.5px 3px 0px rgba(46, 108, 246, 0.6);
    }
  }
  p:nth-child(2) {
    label::before {
      background: url('../../assets/images/circle-icon4.png') no-repeat;
      background-size: 100% 100%;
      box-shadow: 0px 1.5px 3px 0px rgba(46, 108, 246, 0.6);
    }
  }
  p:last-child {
    label::before {
      background: url('../../assets/images/circle-icon1.png') no-repeat;
      background-size: 100% 100%;
      box-shadow: 0px 1.5px 3px 0px rgba(46, 108, 246, 0.6);
    }
  }
}
</style>
